<template>
  <div class="order-confirm">
    <unify-header></unify-header>
    <div class="container">
      <div class="wrapper">
        <h3 class="page-function">填写并核对订单信息</h3>
        <div class="info-box">
          <div class="consignee-box">
            <h5 class="box-title">收货人信息<a href="/center/address/add.html?order=add"
                                          class="add-address">新增收货地址</a></h5>
            <div class="elect-address">
              <loading v-if="defaultAddressLoading"></loading>
              <el-radio class="consignee-info art-radio" v-model="defaultAddress.id" :label="defaultAddress.id"
                        v-if="!defaultAddressLoading">
                <span class="name">{{defaultAddress.name}}</span>
                <span
                  class="detail">{{defaultAddress.provinceName}}{{defaultAddress.cityName}}{{defaultAddress.districtName}}{{defaultAddress.detail}}</span>
                <span class="phone">{{defaultAddress.mobileCode}}</span>
                <em class="default-sign" v-show="defaultAddress.isDefault==='Y'">默认地址</em>
              </el-radio>
            </div>
            <label class="show-address-list"
                   @click="showAndLoadAddressList"
                   v-if="!defaultAddressLoading"
            >更多地址</label>
            <div class="address-list">
              <el-collapse-transition>
                <div v-show="showAddressList">
                  <div class="address-wrapper" :class="{'multiple-page':addressTotalPage>1}">
                    <transition name="el-fade-in">
                      <loading v-show="getUserAddressByPageLoading"></loading>
                    </transition>
                    <transition name="el-fade-in-linear">
                      <ul class="list" v-show="!getUserAddressByPageLoading">
                        <li class="item" v-for="item in addressList" @click="selectAddress(item)">
                          <el-radio class="consignee-info art-radio" v-model="defaultAddress.id" :label="item.id">
                            <span class="name">{{item.name}}</span>
                            <span class="detail">{{item.provinceName}}　{{item.cityName}}　{{item.districtName}}　{{item.detail}}</span>
                            <span class="phone">{{item.mobileCode}}</span>
                            <em class="default-sign" v-show="item.isDefault==='Y'">默认地址</em>
                          </el-radio>
                        </li>
                      </ul>
                    </transition>
                  </div>
                  <el-pagination class="address-list-pagination"
                                 v-if="addressTotalPage>1"
                                 layout="prev, pager, next"
                                 :total="addressTotalRecord"
                                 :pageSize="addressPageSize"
                                 @current-change="addressChangePage"
                  ></el-pagination>
                </div>
              </el-collapse-transition>
            </div>
          </div>
          <div class="order-box">
            <h5 class="box-title">确认订单信息</h5>
            <dl class="list-header">
              <dd></dd>
              <dd>单价</dd>
              <dd>数量</dd>
              <dd>小计</dd>
            </dl>
            <ul class="order-list">
              <li class="item" v-for="item in shopCartItems" :key="item.dbId">
                <div class="order-content">
                  <div class="thumbnail"
                       :style="{backgroundImage:'url('+item.thumbnailImageUrl+')'}"></div>
                  <div class="goods">
                    <strong class="title">{{item.sku}}</strong>
                    <span class="info-item" style="opacity:0;" v-if="item.createdDt!==item.updatedDt">保存时间：{{item.updatedDt}}</span>
                    <span class="info-item">创建时间：{{item.createdDt}}</span>
                  </div>
                </div>
                <div class="unit-price">￥{{item.price}}</div>
                <div class="amount">x {{item.num}}</div>
                <div class="total-prices">￥{{item.total}}</div>
              </li>
            </ul>
          </div>
          <div class="coupons-box">
            <div class="box-title">
              <h5 class="title-inner">确认订单信息</h5>
              <div class="exchange" v-if="false">
                <div class="in-box">
                  <input type="text" class="in-inner" placeholder="在此输入优惠券或礼品卡券码兑换优惠券"/>
                </div>
                <button class="exchange-btn">兑换</button>
              </div>
            </div>
            <el-radio-group v-model="cardTicket" class="type-list">
              <el-radio class="art-radio" :label="index" :key="index" v-for="(item,index) in ['优惠券','礼品卡']">{{item}}
              </el-radio>
            </el-radio-group>
            <div class="coupons-gift-card">
              <div v-show="!cardTicket" class="coupons-list">
                <ul class="list" v-if="coupons.length">
                  <li class="item"
                      :title="item.couponName"
                      :class="{lapse:!+item.viewEnabled}" v-for="item in coupons"
                      @click="couponsSelect(item,$event)"
                  >
                    <div class="money">
                      <div class="cutting"></div>
                      <div class="cost">
                        <strong class="value">{{item.prefeAmount}}</strong>
                        <em class="type">代金券</em>
                      </div>
                    </div>
                    <div class="instruction">
                      <span class="condition">{{item.productTypeName}}使用</span>
                      <span class="validity">有效期至{{item.validEndDate}}</span>
                      <div class="is-use" v-if="+item.viewEnabled">
                        <el-checkbox v-model="item.checked"></el-checkbox>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="nothing" v-if="!coupons.length">
                  <div class="nothing-icon"></div>
                  <span class="prompting">当前还没有任何优惠券，如果您有优惠券券码，请在个人中心 &gt; 优惠券管理页面进行兑换</span>
                </div>
              </div>
              <div v-show="cardTicket" class="gift-card-list">
                <div class="is-use" v-if="balance">
                  <input type="checkbox" v-model="isUseCard"/><span
                  class="balance">使用礼品卡（礼品卡余额：<i>￥{{balance}}</i>）</span>
                  <span class="to-use">此次金额抵用：<i>-￥{{getPreferential()}}</i></span>
                </div>
                <div class="nothing" v-if="!balance">
                  <div class="nothing-icon"></div>
                  <span class="prompting">当前还没有任何礼品卡，如果您有礼品卡券码，请在上方输入后兑换</span>
                </div>
              </div>
            </div>
          </div>
          <div class="invoice-box">
            <h5 class="box-title">发票信息</h5>
            <div class="invoice-info">
              <el-checkbox class="need-invoice field" v-model="needInvoice">普通发票（纸质）</el-checkbox>
              <span class="field" v-show="needInvoice">{{invoiceInfo.invoiceTitle || '无备注'}}</span>
              <span class="field" v-show="needInvoice">明细</span>
              <a href="javascript:void(0);" v-show="needInvoice" class="field edit" @click="invoiceDialogVisible=true">修改</a>
            </div>
            <el-dialog title="发票信息" class="invoice-dialog" :visible.sync="invoiceDialogVisible">
              <el-form :model="invoiceInfo">
                <el-form-item label="发票备注">
                  <el-input type="textarea" v-model="invoiceInfo.invoiceTitle"
                            placeholder="请填写您的邮箱，纳税人识别号和单位名称，若开专用发票，请联系客服人员" maxlength="100"></el-input>
                </el-form-item>
                <el-form-item label="发票内容：明细"></el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="invoiceDialogVisible=false">取 消</el-button>
                <el-button @click="invoiceDialogVisible=false">确 定</el-button>
              </div>
            </el-dialog>
          </div>
          <div class="pay-box">
            <h5 class="box-title">支付方式</h5>
            <div class="pay-type">
              <div class="pay-item wechat-pay" @click="payType=0" :class="{activate:!payType}"><i
                class="iconfont icon-weixin"></i><span>微信</span></div>
              <div class="pay-item alipay-pay" @click="payType=1" :class="{activate:payType}"><i
                class="iconfont icon-alipay"></i><span>支付宝</span>
              </div>
            </div>
            <div class="pay-message">
              <input type="text" class="order-remark" maxlength="50" v-model="orderNote" placeholder="添加订单备注，限50个字"/>
              <span class="prompting">提示：请勿填写有关支付、收货、发票方面信息</span>
            </div>
          </div>
          <div class="cost-box">
            <span class="item"><em>{{goodsTotalNumber}}</em>件商品，总商品金额：￥{{totalAmount}}</span>
            <span class="item" v-show="+preferential">享受优惠：使用{{cardTicket?'礼品卡':'优惠券'}}抵现{{preferential}}元</span>
            <span class="item">中通快递  运费：-￥0.00</span>
            <span class="item" v-show="+preferential">合计优惠金额：-￥{{preferential}}</span>
          </div>
          <div class="in-end-info">
            <h6 class="payable">￥{{(totalAmount - preferential) > 0 ? ((totalAmount - preferential) / 1).toFixed(2) :
              0}}</h6>
            <span
              class="address">收货人：{{defaultAddress.name}}　{{defaultAddress.mobileCode | phonePrivacy}}　　　　寄送至：{{defaultAddress.provinceName}}{{defaultAddress.cityName}}{{defaultAddress.districtName}}{{defaultAddress.detail}}</span>
          </div>
          <div class="go-payment">
            <a href="javascript:void(0);" @click="jump('/user/cart')" class="go-cart">返回购物车</a>
            <button class="submit-order" @click="placeOrder">提交订单</button>
          </div>
        </div>
      </div>
    </div>
    <unify-footer></unify-footer>
  </div>
</template>

<script>
  import {MessageBox} from 'element-ui'
  import UnifyHeader from 'components/header/header'
  import UnifyFooter from 'components/footer/footer'
  import Loading from 'components/common/loading'
  import * as AddressApi from '@/api/address'
  import * as ShopCartApi from '@/api/shopcart'
  import * as OrderApi from '@/api/order'
  import * as CouponAPi from '@/api/coupon'
  import * as GiftCardApi from '@/api/giftcard'
  import * as UserAPi from '@/api/user'

  export default {
    data() {
      return {
        userDbId: null,
        shopCartIds: null,
        defaultAddress: {},
        defaultAddressLoading: false,
        addressPageNo: 1,
        addressPageSize: 10,
        addressList: [], // 用户地址列表 当前页
        addressListCache: {}, // 用户地址列表 缓存
        addressTotalPage: 0, // 总页数
        addressTotalRecord: 0, //总条数
        getUserAddressByPageLoading: false, // 翻页加载用户地址 加载中...
        shopCartItems: [],
        goodsTotalNumber: 0,
        invoiceDialogVisible: false,
        invoiceInfo: {
          invoiceTitle: '',
          productCategory: ''
        },
        payType: 0, // 支付方式 0 微信 1 支付宝
        orderNote: '', // 订单备注
        totalAmount: 0, // 订单总额

        showAddressList: false, // 显示/隐藏 更多地址
        cardTicket: 0, // 0.优惠券1.礼品卡
        checked: false,
        couponPageNo: 1, // 优惠券列表页码
        giftCardPageNo: 1, // 礼品卡列表页码
        coupons: [],
        balance: 0, // 用户余额
        useCoupons: null,
        isUseCard: true,
        preferential: 0,
        needInvoice: false // 需要发票？
      }
    },
    components: {
      UnifyHeader,
      UnifyFooter,
      Loading
    },
    filters: {
      phonePrivacy: function (value) {
        if (value && value.length === 11) {
          return value.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
        }
        return value
      }
    },
    watch: {
      isUseCard: function () {
        this.preferential = this.getPreferential()
      },
      cardTicket: function () {
        this.preferential = this.getPreferential()
      }
    },
    methods: {
      /**
       * 优惠券选择
       * @param coupons
       */
      couponsSelect: function (elect, event) {
        /**
         * TODO:这里element存在设计缺陷,用于复选框显示的span和input因为事件冒泡而调用两次，阻止span事件
         */
        if (event.target.localName === 'span' && event.target.className === 'el-checkbox__inner') {
          return
        }
        if (!+elect.viewEnabled) {
          return
        }
        let _self = this
        this.coupons.forEach(item => {
          item.checked = item.couponCode === elect.couponCode && +item.viewEnabled && !elect.checked
          if (item.checked) {
            _self.useCoupons = item
          }
        })
        this.preferential = this.getPreferential()
      },
      getPreferential: function () {
        let amount = 0
        if (!this.cardTicket) {
          this.coupons.forEach(item => {
            if (item.checked) {
              amount = item.prefeAmount
            }
          })
        } else {
          if (this.balance && this.isUseCard) {
            /**
             * 礼品卡余额高于总价
             * 优惠金额 = 商品总价
             * 总价高于礼品卡余额
             * 优惠金额 = 礼品卡余额
             */
            amount = (+this.balance > +this.totalAmount) ? +this.totalAmount : this.balance
          }
        }
        return (amount / 1).toFixed(2)
      },
      selectAddress: function (address) {
        this.defaultAddress = address
        setTimeout(function () {
          this.showAddressList = false
        }.bind(this), 333)
      },
      showAndLoadAddressList: function () {
        this.showAddressList = !this.showAddressList
        if (this.showAddressList && !this.addressList.length) {
          this.addressPageNo = 1
          this._getUserAddressByPage()
        }
      },
      addressChangePage: function (pn) {
        this.addressPageNo = pn
        let cache = this.addressListCache[pn]
        if (cache) {
          this.addressList = cache
          return
        }
        this.addressList = []
        this._getUserAddressByPage()
      },
      placeOrder: function () {
        if (!this.defaultAddress.id) {
          this.$alert('请添加一个收货地址', '提示')
          return
        }
        const loading = this.$loading({
          lock: true,
          text: '',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let basicParameters = {
          cars: this.shopCartIds,
          invoiceTitle: this.invoiceInfo.invoiceTitle,
          mark: this.orderNote,
          productCategory: this.invoiceInfo.productCategory,
          userDbId: this.userDbId,
          addressDbId: this.defaultAddress.id
        }
        if (this.getPreferential() - 0) {
          if (this.cardTicket) {
            if (this.isUseCard) {
              basicParameters.isUseCard = 1
            }
          } else {
            if (this.useCoupons) {
              basicParameters.couponCode = this.useCoupons.couponCode
            } else {
              basicParameters.couponCode = ''
            }
          }
        }
        OrderApi.createOrder(basicParameters).then(res => {
          if (res.code === 'success') {
            if ((this.totalAmount - this.preferential) <= 0) {
              location.href = '/center/order.html'
              return
            }
            let orderDbId = res.orderDbId
            let payType = this.payType ? 'zfb' : 'wx'
            loading.close()
            this.jump(`/pay/payOrder?addressId=${this.defaultAddress.id}&userDbId=${this.userDbId}&dbId=${orderDbId}&paymentType=${payType}`)
          } else {
            loading.close()
            this.$alert('下单失败，请稍候再试！', '提示')
          }
        })
      },
      _getUserDefaultAddress: function () {
        this.defaultAddressLoading = true
        AddressApi.queryDefaultAddress(this.userDbId).then(res => {
          this.defaultAddressLoading = false
          if (res && res.status === 1) {
            this.defaultAddress = Object.assign({}, res.data, {isDefault: 'Y'})
          }
        })
      },
      _getUserAddressByPage: function () {
        if (this.getUserAddressByPageLoading) {
          return false
        }
        this.getUserAddressByPageLoading = true
        AddressApi.queryAddresses(this.userDbId, {
          currentPageNumber: this.addressPageNo,
          pageSize: this.addressPageSize
        }).then(res => {
          this.getUserAddressByPageLoading = false
          if (!res) {
            return
          }
          if (res.status === 1) {
            this.addressList = res.data.addressList
            this.addressListCache[this.addressPageNo] = res.data.addressList
            if (this.addressPageNo === 1) {
              this.addressTotalPage = res.data.totalPageCount
              this.addressTotalRecord = res.data.totalCount
            }
          }
        })
      },
      _getShopCartItems: function () {
        ShopCartApi.queryAll({
          dbId: this.shopCartIds
        }).then(res => {
          if (!res || !res.length) {
            sessionStorage['cars'] = ''
            this.jump('/user/cart')
            return
          }
          let categoryList = []
          let productTypes = []
          res.forEach(item => {
            let productNameStr = item.skuCode.split('.')[0]
            if (productNameStr === 'lvxingji') {
              productNameStr = 'voyage,fanghuace'
            } else if (productNameStr === 'biyeji') {
              productNameStr = 'biyeji,fanghuace'
            } else if (productNameStr === 'qixishu') {
              productNameStr = 'qixishu,fanghuace'
            } else if (productNameStr === 'purple') {
              productNameStr = 'jiashu'
            } else if (productNameStr === 'citiehuaxin') {
              productNameStr = 'citiehua'
            }
            productTypes.push(productNameStr)
            categoryList.push(item.sku.split('.')[0])
            this.goodsTotalNumber += item.num
            this.totalAmount += item.total
          })
          this._queryCouponStrategy(productTypes.join(','))
          if (this.totalAmount) {
            this.totalAmount = (this.totalAmount / 1).toFixed(2)
          }
          this.invoiceInfo.productCategory = categoryList.join('+')
          this.shopCartItems = res
        })
      },
      /**
       * 最佳优惠券
       * @private
       */
      _queryCouponStrategy: function (productTypes) {
        let _self = this
        CouponAPi.queryCouponStrategy({
          passId: this.userDbId,
          productTypes: productTypes
        }).then(res => {
          if (!res) {
            return
          }
          let list = res.data.couponList
          list.forEach((item, index) => {
            item.checked = +item.viewEnabled && !index
            if (item.checked) {
              _self.useCoupons = item
            }
          })
          this.coupons = list
          this.preferential = this.getPreferential()
        })
      },
      /**
       * 兑换优惠券
       * @private
       */
      _assignCoupon: function (couponCode) {
        CouponAPi.assignCoupon({
          passId: this.userDbId,
          couponCode: couponCode
        }).then(res => {
          if (!res) {
            return
          }
          if (res.status === 'OK') {
            console.log('success')
          }
        })
      },
      /**
       * 获取个人资料
       * @private
       */
      _getUserInfo: function () {
        UserAPi.userInfo({
          passId: this.userDbId
        }).then(res => {
          if (!res) {
            return
          }
          if (res.status === 'OK') {
            this.balance = (res.data.giftcardBalance / 1).toFixed(2)
          }
        })
      }
    },
    mounted() {
      if (!this.userDbId) {
        location.href = '/welcome.html'
        return
      }
      if (!this.shopCartIds || !this.shopCartIds.split(',').length) {
        this.jump('/user/cart')
        return
      }
    },
    created: function () {
      this.userDbId = localStorage.getItem('userDbId')
      this.shopCartIds = sessionStorage.getItem('cars')
      this._getUserDefaultAddress()
      this._getShopCartItems()
      this._getUserInfo()
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">
  .order-confirm .container {

    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #5800db;
      border-color: #5800db;
    }

    .el-checkbox__inner {
      border: 1px solid #d6d6d6;
    }

    min-height: 1000px;
    background: #f1f1f1;
    .wrapper {
      width: 1000px;
      margin: 0 auto;
      padding: 50px 0 40px;
    }
    .page-function {
      color: #666;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
    }
    .info-box {
      width: 100%;
      margin: 22px auto 0;
      padding: 20px 15px 124px;
      min-height: 1000px;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
    }
    .consignee-box {
      padding: 0 2px 20px 18px;
      border-bottom: 1px solid #d3d3d3;
    }
    .box-title {
      color: #333;
      font-size: 14px;
      font-weight: bold;
      line-height: 14px;
      .add-address {
        color: #3784e4;
        font-size: 12px;
        font-weight: 400;
        float: right;
        user-select: none;
      }
    }
    .elect-address {
      padding: 18px 0 8px;
    }
    .art-radio .el-radio__input {
      .el-radio__inner:hover {
        border-color: #000;
      }
      &.is-checked .el-radio__inner {
        border-color: #000;
        background: #fff;
        &:after {
          width: 8px;
          height: 8px;
          background-color: #000;
        }
      }
    }
    .consignee-info {
      vertical-align: top;
      font-size: 0;
      & > * {
        vertical-align: top;
      }
      .name, .detail, .phone, .default-sign {
        display: inline-block;
        line-height: 20px;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        color: #666;
      }
      .name {
        margin-left: 16px;
      }
      .detail {
        margin-left: 30px;
      }
      .phone {
        margin-left: 14px;
      }
      .default-sign {
        margin-left: 18px;
        padding: 0 12px;
        background: #cc0000;
        color: #fff;
        font-size: 12px;
        cursor: default;
      }
    }
    .show-address-list {
      font-size: 12px;
      color: #666;
      font-weight: 400;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      &:after {
        position: relative;
        top: 3px;
        display: inline-block;
        margin-left: 6px;
        content: '》';
        transform: rotate(90deg);
      }
    }
    .address-list {
      .address-wrapper {
        position: relative;
        padding: 10px 0;
        &.multiple-page {
          min-height: 310px;
          .loading {
            top: 142px;
          }
        }
      }
      .loading {
        position: absolute;
        left: 142px;
      }
      .item {
        margin: 10px 0;
        &:first-child {
          margin-top: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
      .address-list-pagination {
        padding-left: 38px;
        button.disabled {
          color: #d6d2d2;
        }
        .btn-next, .btn-prev {
          background: transparent;
          border: 0;
          &:hover {
            color: #000;
          }
        }
        li {
          background: transparent;
          border: 0;
          &:hover {
            color: #000;
          }
        }
        .number.active {
          color: #000;
        }
      }
    }
    .order-box {
      padding-bottom: 30px;
      border-bottom: 1px solid #d3d3d3;
      .box-title {
        padding: 30px 0 16px 18px;
      }
      .list-header {
        display: flex;
        dd {
          flex: 0 0 13%;
          margin-left: 2px;
          padding-bottom: 10px;
          color: #333;
          font-weight: 400;
          font-size: 12px;
          line-height: 1;
          border-bottom: 4px solid #d4d4d4;
          text-align: center;
          &:first-child {
            flex: 1;
            width: 100%;
            margin: 0;
          }
        }
      }
      .order-list {
        padding-top: 10px;
        .item {
          display: flex;
          margin-top: 8px;
          padding: 18px;
          border-top: 1px dashed #666;
          background: #e8e8e8;
        }
        .order-content {
          flex: 1;
          width: 100%;
          .thumbnail {
            display: inline-block;
            width: 80px;
            height: 80px;
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: contain;
            background-color: #fff;
          }
          .goods {
            display: inline-block;
            margin-left: 8px;
            vertical-align: top;
            .title {
              display: block;
              margin-bottom: 6px;
              color: #333;
              font-size: 14px;
              font-weight: bold;
              line-height: 20px;
            }
            .info-item {
              display: block;
              margin-top: 6px;
              font-size: 12px;
              font-weight: 400;
              color: #333;
            }
          }
        }
        .unit-price, .amount, .total-prices {
          flex: 0 0 13%;
          color: #333;
          font-size: 14px;
          font-weight: 400;
          text-align: center;
        }
        .total-prices {
          color: #e4393c;
        }
      }
    }
    .coupons-box {
      margin-top: 18px;
      padding-bottom: 30px;
      border-bottom: 1px solid #d3d3d3;
      .box-title {
        line-height: 40px;
        .title-inner {
          display: inline-block;
          padding-left: 18px;
          line-height: 40px;
          color: #333;
          font-size: 14px;
          font-weight: bold;
        }
      }
      .exchange {
        float: right;
        font-size: 0;
        .in-box {
          display: inline-block;
          box-sizing: border-box;
          width: 560px;
          height: 40px;
          border: 1px solid #d6d6d6;
          .in-inner {
            display: block;
            border: 0;
            margin: 0;
            padding: 0 16px;
            width: 100%;
            box-sizing: border-box;
            height: 38px;
            font-size: 14px;
          }
        }
        .exchange-btn {
          display: inline-block;
          outline: 0;
          margin-left: 22px;
          padding: 0 44px;
          line-height: 40px;
          color: #fff;
          font-size: 14px;
          background: #000;
          border-radius: 5px;
          cursor: pointer;
          &:focus {
            outline: 0;
          }
          &:hover {
            color: #8c8686;
          }
        }
      }
      .type-list {
        padding-left: 18px;
        margin-top: 36px;
        .art-radio {
          margin-right: 22px;
        }
      }
      .coupons-gift-card {
        width: 848px;
        margin: 18px auto 0;
        overflow: hidden;
      }
      .coupons-list, .gift-card-list {
        .list {
          width: 892px;
          font-size: 0;
        }
        .item {
          display: inline-block;
          width: 402px;
          height: 98px;
          margin-right: 44px;
          margin-top: 30px;
          overflow: hidden;
          cursor: pointer;
          user-select: none;
          &.lapse {
            cursor: not-allowed;
            .money {
              .cutting {
                background: #dedede;
                border-right: 1px dashed #e8e8e8;
              }
              .cost .value, .cost .type {
                color: #dedede;
              }
            }
            .instruction {
              .condition, .validity {
                color: #dedede;
              }
            }
          }
          .money {
            display: flex;
            float: left;
            width: 23%;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid #d6d6d6;
            border-left: 0;
            border-right: 1px dashed #d6d6d6;
            border-radius: 6px;
            overflow: hidden;
            .cutting {
              flex: 0 0 6px;
              width: 6px;
              box-sizing: border-box;
              height: 100%;
              background: #5800db;
              border-right: 1px dashed #9f6dea;
            }
            .cost {
              flex: 1;
              width: 100%;
              padding-top: 20px;
              text-align: center;
              .value {
                font-size: 30px;
                font-weight: 500;
                line-height: 1;
                color: #5800db;
                &:before {
                  position: relative;
                  top: -1px;
                  content: '￥';
                  font-size: 16px;
                  font-weight: 400;
                  margin-left: -.6em;
                }
              }
              .type {
                display: block;
                margin-top: 16px;
                font-size: 14px;
                font-weight: 400;
                font-style: normal;
                color: #333;
              }
            }
          }
          .instruction {
            position: relative;
            float: left;
            width: 77%;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid #d6d6d6;
            border-left: 0;
            border-radius: 6px;
            .condition, .validity {
              position: absolute;
              left: 12px;
              right: 12px;
              color: #333;
              font-weight: 400;
              overflow: hidden;
            }
            .condition {
              top: 18px;
              font-size: 14px;
            }
            .validity {
              bottom: 16px;
              font-size: 12px;
            }
            .is-use {
              position: absolute;
              top: 0;
              right: 0;
              width: 22px;
              height: 22px;
              .el-checkbox {
                overflow: hidden;
              }
              .el-checkbox__input {
                vertical-align: top;
              }

              .el-checkbox__inner {
                border-top: 0;
                border-right: 0;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                width: 22px;
                height: 22px;
                &:after {
                  width: 5px;
                  height: 10px;
                  left: 8px;
                  top: 3px;
                }
              }
            }
            &:before, &:after {
              position: absolute;
              box-sizing: border-box;
              left: -5px;
              content: '';
              display: block;
              width: 10px;
              height: 14px;
              border: 1px solid #d6d6d6;
              border-radius: 50%;
              background: #f1f1f1;
            }
            &:before {
              top: -7px;
            }
            &:after {
              bottom: -7px;
            }
          }
        }
        .nothing {
          padding-top: 90px;
          .nothing-icon {
            width: 124px;
            height: 158px;
            margin: 0 auto 42px;
            background: url('../../../assets/img/order/nothing.png') no-repeat;
            background-size: 100% 100%;
          }
          .prompting {
            display: block;
            font-weight: 400;
            font-size: 12px;
            color: #333;
            text-align: center;
          }
        }
        .is-use {
          input {
            display: inline-block;
          }
          i {
            color: #e4393c;
            font-style: normal;
          }
          .balance {
            margin-left: 4px;
            font-size: 14px;
            font-weight: 400;
          }
        }
        .to-use {
          display: block;
          margin: 4px 0 0 16px;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
    .invoice-box {
      margin-top: 18px;
      padding-bottom: 30px;
      border-bottom: 1px solid #d3d3d3;
      .box-title, .invoice-info {
        padding-left: 18px;
      }
      .invoice-info {
        margin-top: 30px;
        .need-invoice .el-checkbox__label {
          font-size: 12px;
          line-height: 18px;
        }
      }
      .field {
        margin-right: 30px;
        font-size: 12px;
        font-weight: 400;
        color: #666;
      }
      .edit {
        color: #3784e4;
      }
      .invoice-dialog {
        .el-input .el-input__inner:hover, .el-input .el-input__inner:focus {
          border-color: #000;
        }
        .dialog-footer .el-button {
          padding: 8px 25px;
          &:hover {
            color: #000;
            border-color: #000;
          }
          &:last-child {
            color: #fff;
            background: #000;
            border: 0;
          }
        }
      }
    }
    .pay-box {
      margin-top: 18px;
      padding-bottom: 30px;
      border-bottom: 1px solid #d3d3d3;
      .box-title, .pay-type, .pay-message {
        padding-left: 18px;
      }
      .pay-type {
        margin: 18px 0 34px;
      }
      .pay-item {
        display: inline-block;
        width: 134px;
        height: 42px;
        box-sizing: border-box;
        margin-right: 30px;
        border: 1px solid #d3d3d3;
        padding: 0 10px;
        line-height: 42px;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          border-color: #000;
        }
        &.activate {
          border-color: #000;
        }
        i.iconfont {
          margin-right: 10px;
          font-size: 28px;
          &.icon-weixin {
            color: #00cf0d;
          }
          &.icon-alipay {
            font-size: 25px;
            color: #00a9f2;
          }
        }
        span {
          position: relative;
          top: 15px;
          display: inline-block;
          vertical-align: top;
          line-height: 1;
        }
      }
      .order-remark {
        display: inline-block;
        width: 398px;
        height: 40px;
        padding: 0 24px;
        box-sizing: border-box;
        font-size: 13px;
      }
      .prompting {
        margin-left: 20px;
        font-size: 12px;
        color: #666;
        line-height: 40px;
      }
    }
    .cost-box {
      padding-top: 12px;
      .item {
        display: block;
        margin-top: 18px;
        text-align: right;
        color: #333;
        line-height: 1;
        font-size: 14px;
        font-weight: 400;
        em {
          color: #ef0000;
          font-weight: 400;
          font-style: normal;
        }
      }
    }
    .in-end-info {
      margin-top: 45px;
      padding: 18px 32px 24px;
      border-top: 1px solid #d3d3d3;
      background: #e8e8e8;
      .payable {
        color: #ef0000;
        font-size: 24px;
        font-weight: 400;
        text-align: right;
        line-height: 1;
        &:before {
          content: '应付总额：';
          font-weight: 400;
          font-size: 14px;
          color: #333;
        }
      }
      .address {
        display: block;
        font-size: 14px;
        color: #666;
        font-weight: 400;
        margin-top: 26px;
        line-height: 1.8;
        text-align: right;
      }
    }
    .go-payment {
      margin-top: 22px;
      text-align: right;
      .go-cart {
        color: #3784e4;
        font-weight: 400;
        font-size: 12px;
      }
      .submit-order {
        border: 0;
        padding: 0 44px;
        background: #000;
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        color: #fff;
        outline: 0;
        &:focus {
          outline: 0;
        }
      }
    }

  }
</style>
